<template>
  <div class="participant-expense-container">
    <div class="expense-panel">
      <div class="panel-header">
        <div class="panel-title">
          <el-icon><Document /></el-icon>
          <span>参保人员信息</span>
        </div>
      </div>
      
      <div class="search-section">
        <el-input
          v-model="searchQuery"
          placeholder="参保人员姓名"
          class="search-input"
          clearable
        >
          <template #append>
            <el-button @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
          </template>
        </el-input>
      </div>
      
      <el-table
        :data="participants"
        stripe
        border
        style="width: 100%"
        highlight-current-row
        @row-click="handleRowClick"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="hospitalNo" label="住院号" width="100" align="center" />
        <el-table-column prop="name" label="姓名" width="100" align="center" />
        <el-table-column prop="gender" label="性别" width="60" align="center" />
        <el-table-column prop="idCard" label="身份证号" width="180" align="center" />
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="prev, pager, next"
          :total="totalParticipants"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          small
        />
      </div>
    </div>
    
    <div class="expense-detail-panel" v-if="selectedParticipant.id">
      <div class="panel-header">
        <div class="panel-title">
          <span>主要用详情</span>
        </div>
        <el-button type="primary" size="small">查看</el-button>
      </div>
      
      <div class="basic-info-section">
        <div class="info-row">
          <div class="info-item">
            <span class="label">姓名：</span>
            <span class="value">{{ selectedParticipant.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">性别：</span>
            <span class="value">{{ selectedParticipant.gender }}</span>
          </div>
          <div class="info-item">
            <span class="label">住院号：</span>
            <span class="value">{{ selectedParticipant.hospitalNo }}</span>
          </div>
          <div class="info-item">
            <span class="label">总费用：</span>
            <span class="value highlight">{{ formatCurrency(selectedParticipant.totalExpense) }}</span>
          </div>
        </div>
      </div>
      
      <!-- 费用明细标签页 -->
      <div class="expense-tabs-container">
        <el-tabs v-model="activeTab" class="expense-tabs">
          <el-tab-pane label="药品费用信息" name="drug">
            <el-table :data="drugExpenses" stripe border style="width: 100%">
              <el-table-column prop="name" label="药品名称" min-width="120" />
              <el-table-column prop="specification" label="规格" min-width="150" />
              <el-table-column prop="unit" label="单位" width="80" />
              <el-table-column prop="manufacturer" label="生产厂家" min-width="180" />
              <el-table-column prop="price" label="价格" width="100">
                <template #default="scope">
                  {{ scope.row.price }}
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <el-tab-pane label="诊疗项目信息" name="treatment">
            <el-table :data="treatmentExpenses" stripe border style="width: 100%">
              <el-table-column prop="name" label="诊疗项目名称" min-width="120" />
              <el-table-column prop="code" label="诊疗项目编码" min-width="120" />
              <el-table-column prop="content" label="诊疗项目除外内容" min-width="180" />
              <el-table-column prop="unit" label="计价单位" width="80" />
              <el-table-column prop="price" label="价格" width="100">
                <template #default="scope">
                  {{ scope.row.price }}
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <el-tab-pane label="医疗服务信息" name="service">
            <el-table :data="serviceExpenses" stripe border style="width: 100%">
              <el-table-column prop="name" label="医疗服务名称" min-width="120" />
              <el-table-column prop="code" label="医疗服务编码" min-width="120" />
              <el-table-column prop="content" label="医疗服务除外内容" min-width="180" />
              <el-table-column prop="unit" label="计价单位" width="80" />
              <el-table-column prop="price" label="价格" width="100">
                <template #default="scope">
                  {{ scope.row.price }}
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <el-tab-pane label="其他项目" name="other">
            <el-table :data="otherExpenses" stripe border style="width: 100%">
              <el-table-column prop="name" label="项目名称" min-width="120" />
              <el-table-column prop="code" label="项目编码" min-width="120" />
              <el-table-column prop="content" label="项目内容" min-width="180" />
              <el-table-column prop="unit" label="计价单位" width="80" />
              <el-table-column prop="price" label="价格" width="100">
                <template #default="scope">
                  {{ scope.row.price }}
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { Document, Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

// 搜索相关
const searchQuery = ref('');
const currentPage = ref(1);
const pageSize = ref(10);

// 参保人员数据
const participants = ref([
  {
    id: 1,
    hospitalNo: '1000001',
    name: '夏浩兴',
    gender: '男',
    idCard: '123123200007011234',
    address: '沈阳市',
    admissionDate: '2022-10-28 02:10:33',
    workStatus: '在职',
    settlementType: '医保',
    totalExpense: 8754.50
  },
  {
    id: 2,
    hospitalNo: '1000002',
    name: '李宝辰',
    gender: '男',
    idCard: '123123200007011234',
    address: '河北省秦皇岛市',
    admissionDate: '2022-10-31 03:53:03',
    workStatus: '退休',
    settlementType: '医保',
    totalExpense: 6532.20
  },
  {
    id: 3,
    hospitalNo: '1000003',
    name: '郝强国',
    gender: '男',
    idCard: '123123200007011234',
    address: '辽宁',
    admissionDate: '2022-12-22 02:03:02',
    workStatus: '在职',
    settlementType: '医保',
    totalExpense: 4321.75
  }
]);

// 总参保人员数量
const totalParticipants = computed(() => {
  return participants.value.length;
});

// 选中的参保人员
const selectedParticipant = ref({});

// 当前激活的标签页
const activeTab = ref('drug');

// 药品费用数据
const drugExpenses = ref([
  {
    id: 1,
    name: '奥比帕利',
    specification: '奥比帕利12.5mg帕立维芬5mg利托那韦50mg',
    unit: '盒',
    manufacturer: '爱尔兰Fournier Laboratories Ireland Limited',
    price: 2712.6
  },
  {
    id: 2,
    name: '奥比帕利',
    specification: '奥比帕利12.5mg帕立维芬5mg利托那韦50mg',
    unit: '盒',
    manufacturer: '爱尔兰Fournier Laboratories Ireland Limited',
    price: 2712.6
  },
  {
    id: 3,
    name: '盐酸达拉他韦',
    specification: '60mg',
    unit: '盒',
    manufacturer: '美国AstraZeneca Pharmaceuticals LP',
    price: 2622.9
  },
  {
    id: 4,
    name: '环泊素',
    specification: '25mg',
    unit: '盒',
    manufacturer: '杭州中美华东制药有限公司',
    price: 243.49
  }
]);

// 诊疗费用数据
const treatmentExpenses = ref([
  {
    id: 1,
    name: '便用关节镜加收',
    code: '300000000/2',
    content: '',
    unit: '台/次',
    price: 250
  }
]);

// 医疗服务数据
const serviceExpenses = ref([
  {
    id: 1,
    name: '门诊诊查费(医师)',
    code: '110200001-1',
    content: '',
    unit: '次',
    price: 3
  }
]);

// 其他费用数据
const otherExpenses = ref([]);

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1;
  ElMessage.success(`搜索关键词: ${searchQuery.value}`);
};

// 处理行点击
const handleRowClick = (row) => {
  selectedParticipant.value = row;
  ElMessage.info(`选中参保人员: ${row.name}`);
};

// 处理每页显示数量变化
const handleSizeChange = (size) => {
  pageSize.value = size;
  ElMessage.info(`每页 ${size} 条`);
};

// 处理页码变化
const handleCurrentChange = (page) => {
  currentPage.value = page;
  ElMessage.info(`当前页: ${page}`);
};

// 格式化货币
const formatCurrency = (value) => {
  return `¥ ${value.toFixed(2)}`;
};

// 初始化时选中第一个参保人员
onMounted(() => {
  if (participants.value.length > 0) {
    selectedParticipant.value = participants.value[0];
  }
});
</script>

<style scoped>
.participant-expense-container {
  padding: 20px;
  display: flex;
  gap: 20px;
}

.expense-panel {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 40%;
  min-width: 450px;
}

.expense-detail-panel {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  flex: 1;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.panel-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

.panel-title .el-icon {
  margin-right: 8px;
  font-size: 18px;
}

.search-section {
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.basic-info-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
}

.info-item {
  margin-right: 30px;
  margin-bottom: 10px;
}

.label {
  color: #606266;
  margin-right: 5px;
}

.value {
  font-weight: 500;
}

.highlight {
  color: #f56c6c;
  font-weight: bold;
}

.expense-tabs-container {
  margin-top: 20px;
}

.expense-tabs {
  width: 100%;
}
</style> 